<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双人五子棋</title>
		<link rel="stylesheet" type="text/css" href="cheese.css"/>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="cheese.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#main{
				display: block;
				position: absolute;
				padding: 50px;
				width: 800px;
				height: 620px;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				background-color: #D2B48C ;
				border-radius: 20px;
				border: 8px outset #DEB887;
			}
			#board{
				display: block;
				box-shadow: 0px 0px 5px #000;
				border-radius: 10px;
				border: 3px outset #D2B48C;
			 }
			 #regret,#giveUp,#restart,#player{
				display: inline-block;
				width: 80px;
				height: 50px;
				color: #F3F2F2;
				font-size: 2em;
				position: absolute;
				cursor: pointer;
				letter-spacing: 8px;
				padding: 2px 5px;
				border: 5px outset #DEB887 ;
				border-radius: 5px;
				right: 80px;
				padding-left: 10px;
			 }
			 #regret{
				top: 150px; 
			 }
			 #giveUp{
				 top: 250px;
			 }
			 #restart{
				 top: 350px;
			 }
			 #player{
				 top: 450px;
			 }
			 #textBox{
				 position: fixed;
				 width: 200px;
				 height: 100px;
				 background-color: rgba(0,0,0,0.4) ;
				 color: #F3F2F2;
				 border: 5px outset #D2B48C;
				 left: 50%;
				 top: 50%;
				 margin-left: -200px;
				 margin-top: -100px;
				 padding-left: 20px;
				 display: none;
			 }
			 #text{
				text-align: center;
				line-height: 50px;
				font-size: 1.4em;
			 }
			 #btn1,#btn2{
				 cursor: pointer;
				 float: left;
				 margin: 15px 0px 0px 40px;
			 }
			 #btn1:hover,#btn2:hover{
				 color: orange;
			 }
			 em{
				 font-style: normal;
			 }
		</style>
	</head>
	<body>
		<div id="main">
			<canvas id="board" width="600px" height="600px"></canvas>
			<span id="regret">悔棋</span>
			<span id="giveUp">认输</span>
			<span id="restart">重开</span>
			<span id="player"><em></em></span>
		</div>
		<div id="textBox">
			<div id="text"></div>
			<div id="btn1">确定</div>
			<div id="btn2">取消</div>
		</div>
	</body>
	<script type="text/javascript">
		var box = [];
		for(var i=0;i<15;i++){
			box[i] = [];
			for(var j=0;j<15;j++){
				box[i][j] = 0;
			}
		}
		var player = true;//玩家的状态
		var start = false;//棋局是否开始
		var move = true;//是否能进行操作
		var x,y;//鼠标坐标
		var cheese = document.getElementById("board");
		var ctx = cheese.getContext('2d');
		// 函数
		$(function(){
			drawCheeseBoard();
			whoPlay();
		})
		$('#regret').click(function(){
			if(move){
				var sub = 0;
				for(var i=0;i<15;i++){
					for(var j=0;j<15;j++){
						if(box[i][j] == 0) sub++;
					} 
				} 
				if(sub == 225) start = false;
				else start = true;
				if(start){
					regretText();
					$('#btn1').click(function(){
						$('#textBox').css("display","none");
						regret(x,y,box,player);
						player = !player;
						move=true;
					})
					$('#btn2').click(function(){
						$('#textBox').css("display","none");
						move = true;
					})
				}
			}
		})
		$('#giveUp').click(function(){
			if(move){
				giveUpText();
				$('#btn1').click(function(){
					$('#textBox').css("display","none");
					cleanBoard();
					drawCheeseBoard();
					cleanArray();
				})
				$('#btn2').click(function(){
					$('#textBox').css("display","none");
					move = true;
				})
			}
		})
		$('#restart').click(function(){
			if(move){
				restartText();
				$('#btn1').click(function(){
					$('#textBox').css("display","none");
					cleanBoard();
					drawCheeseBoard();
					cleanArray();
				})
				$('#btn2').click(function(){
					$('#textBox').css("display","none");
					move = true;
				})
			}
		})
		//绘制棋子
		$('#board').click(function(e){
			if(move){
				xy(e);
				if(box[x][y] == 0){
					drawOne(x,y,player);
					if(player)	box[x][y]=1;
					else	box[x][y]=2;
					if(judge(x,y,player,box)){
						winer(player);
						$('#btn1').click(function(){
							$('#textBox').css("display","none");
							cleanBoard();
							drawCheeseBoard();
							cleanArray();
						})
						$('#btn2').click(function(){
							$('#textBox').css("display","none");
							cleanBoard();
							drawCheeseBoard();
							cleanArray();
						})
					} 
					player = !player;
					whoPlay();
				}
				start = true;
			}
		})
	</script>
</html>